﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/Content/site.css" rel="stylesheet" />
    @Scripts.Render("~/bundles/jquery")
    <script src="/Scripts/hightcharts/highcharts.js"></script>
    <script type="text/javascript">
        Highcharts.setOptions({
            global: {    
                useUTC: false    
            },
            lang: {
                months: ['一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月'],
                weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                downloadPNG: "下载 PNG 图片",
                downloadJPEG: "下载 JPEG 图片",
                downloadPDF: "下载 PDF 文档",
                downloadSVG: "下载SVG矢量图",
                exportButtonTitle: "输出图片",
                loading: "稍等...",
                printButtonTitle: "打印图表"
            }
        });
        function tooltipFormatter(tooltip) {
            var index = tooltip.points[0].point.index,
            ret = '<small>' + Highcharts.dateFormat('%A, %m月%e日%H时', tooltip.x) + '</small><br>';
            ret += '<table>';
            Highcharts.each(tooltip.points, function (point) {
                var series = point.series;
                ret += '<tr><td><span style="color:' + series.color + '">\u25CF</span> ' + series.name +
                    ': </td><td style="white-space:nowrap">' + Highcharts.pick(point.point.value, point.y) +
                    (series.options.tooltip && series.options.tooltip.valueSuffix ? series.options.tooltip.valueSuffix : "");
                ret += '</td></tr>';
            });
            ret += '</table>';
            return ret;
        }

        $(document).ready(function() {
            $('#container').highcharts({
                credits: { enabled: false },
                title: {
                    text: '近24小时温度（°C）曲线图'
                },
                xAxis: [{// Bottom X axis
                        type: 'datetime',
                        tickInterval: 2 * 36e5, // two hours
                        minorTickInterval: 36e5, // one hour
                        tickLength: 0,
                        gridLineWidth: 1,
                        gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0',
                        startOnTick: false,
                        endOnTick: false,
                        minPadding: 0,
                        maxPadding: 0,
                        //offset: 30,
                        showLastLabel: true,
                        labels: {
                            format: '{value:%H}'
                        }
                    }, {// Top X axis
                        linkedTo: 0,
                        type: 'datetime',
                        tickInterval: 24 * 3600 * 1000,
                        labels: {
                            format: '{value:<span style="font-size: 12px; font-weight: bold">%a</span> %m-%e}',
                            align: 'left',
                            x: 3,
                            y: -5
                        },
                        opposite: true,
                        tickLength: 20,
                        gridLineWidth: 1
                    }],
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            formatter: function() {
                                if (this.point.series.name == "风向") return "";
                                return this.point.y;
                            }
                        },
                        pointPlacement: 'between',
                        connectNulls: true
                    }
                },
                legend: {
                    enabled: false
                },
                yAxis: [
                    {
                        labels: {
                            formatter: function() {
                                return this.value;
                            },
                            style: {
                                color: '#FF0000',
                                fontSize: '10px'
                            },
                            x: -3
                        },
                        title: {
                            enabled: false,
                            text: '温度（°C）',
                            style: {
                                color: '#FF0000'
                            }
                        },
                        maxPadding: 0.3,
                        tickInterval: 1,
                    }
                ],

                tooltip: {
                    shared: true,
                    useHTML: true,
                    formatter: function() {
                        return tooltipFormatter(this);
                    }
                },
                series: [{
                    name: '温度',
                    color: '#FF0000',
                    shadow: false,
                    tooltip: { valueSuffix: ' °C' },
                    marker: { enabled: false },
                    data: @Html.Raw(ViewBag.WeatherRealTimeJson)
                }]
            });
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 100%; margin: 0 auto;">
    </div>
</body>
</html>